<template>
	<view :class="pageClass" >
		<addFriendNavigation
		:select = "select"
		@findMan="findMan" 
		@findGroup="findGroup">
		</addFriendNavigation>
		<scroll-view scroll-y="true" style="height: 100%;">
			<view class="search-block" 
			v-if="select ==  0"
			:style="{'margin-top': height+80 + 'px'}" @click="select = 2">
				<label class="iconfont iconbuoumaotubiao13"></label>
				<text class="search-block-text">PY号/手机号/群</text>
			</view>
			
			 <uni-list class="find-list" v-if="select ==  0">
			     <uni-list-item title="添加手机联系人" link to="../doing/doing">
					 <template slot="header">
					     <label class="iconfont iconV"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="扫一扫添加好友" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont icontubiaolunkuo-"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="面对面加好友" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont iconxinhao"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="按条件查找陌生人" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont iconsousuo"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="扩列匹配" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont icontianjiahaoyou"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="面对面发起群聊" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont iconfaqiqunliaobeifen"></label>
					 </template>
				 </uni-list-item>
				 <uni-list-item title="查看附近的人" link to="../doing/doing">
					 <template slot="header">
						 <label class="iconfont iconfujin"></label>
					 </template>
				 </uni-list-item>
			 </uni-list>
			 
			 <!-- 可能认识的人 -->
			 <view class="maybe-know" v-if="select==0">
			 	<view class="maybe-know-title">
			 		<text>可能想认识的人</text>
					<text style="color: #999999;">查看更多<label class="iconfont icon113fangxiang_xiangyou"></label></text>
			 	</view>
				<scroll-view scroll-x class="maybe-know-scroll">
					<view class="maybe-know-item" v-for="i in 10">
						<view>
							<image class="maybe-know-item-headPic" src="@/static/headPic.jpg" mode=""></image>
						</view>
						<view class="maybe-know-item-nickName">
							<text>小明</text>
						</view>
						<view class="maybe-know-item-source">
							<text>来自遥远的M27星云的小朋友</text>
							<!-- <text>来自</text> -->
						</view>
						<view class="maybe-know-item-buttom">
							<text>添加</text>
						</view>
					</view>
				</scroll-view>
			 </view>
			 
			 <view class="search-page" v-if="select == 2"
			 :style="{'margin-top': height+ 'px',}">
			 	<label class="iconfont icon115fangxiang_xiangzuo" @click="toZero"></label>
			 	<view class="search-input"
				>
				 <!-- :style="isFocus ? 'width: 70%' : 'width: 83%'"  -->
			 		<label class="iconfont iconsousuo"></label>
			 		<input type="text" value="" placeholder="搜索"
					 v-model="key"
					 confirm-type="search" 
					 :style="isFocus ? 'width: 98%' : 'width: 70%'"
					 auto-blur = "true"
					 @confirm="search"
					 @blur="noFocus"
					 @focus="focus"
					 :focus="isFocus"/>
			 	</view>
				<!-- v-show="isFocus" -->
			 	<view class="search-bottom"  @click="search">
			 		<text>搜索</text>
			 	</view>
			 </view>
			 
			 
			 <scroll-view scroll-y class="search-result" v-if="select == 2 && searchResult.length > 0">
				 <view class="search-result-man">
				 	<view class="search-result-man-title">
				 		<text>查找人</text>
				 	</view>
					<view class="search-result-man-item" v-for="result in searchResult" :key = result.id >
						<image class="search-result-man-headPic" src="@/static/head.png" mode=""></image>
						<view class="search-result-man-details">
							<view class="search-result-man-name-py">
									{{result.nickName}}
							</view>
							<view class="search-result-man-age-constellation">
								<view class="search-result-man-age">
									<label class="iconfont iconnan"></label>
									<text style="font-size: 12px;">{{result.age}}</text>
								</view>
								<view class="search-result-man-constellation">
									{{result.constellation}}
								</view>
							</view>
							<view class="search-result-man-sign omit">
								{{result.personalSignature}}
							</view>
						</view>
						<button class="search-result-man-add"
						 v-if="result.added === 0"
						 style="background-color:  #FFFFFF;"
						 @click="addFriend(result)"
						 >
						 添加
						</button>
						<button class="search-result-man-add"
						 v-else-if="result.added === 1"
						 disabled
						 style="background-color:  #FFFFFF;"
						 >
						 添加中
						</button>
						<button class="search-result-man-add"
						 v-else="result.added === 2"
						 disabled
						 style="background-color:  #FFFFFF;"
						 >
						  已添加
						</button>
						<view 
					</view>
				 </view>
				 <view class="search-result-group">
				 	<view class="search-result-group-title">
				 		<text>查找群</text>
						<label class="iconfont icon113fangxiang_xiangyou"></label>
				 	</view>
					<view class="search-result-group-item">
						<image class="search-result-group-headPic" src="@/static/head.png" mode=""></image>
						<view class="search-result-group-details">
							<view class="search-result-group-name-py">
									曙
							</view>
							<view class="search-result-group-feature">
								<view class="search-result-group-feature-single" style="margin-left: 0;">
									<label class="iconfont iconyonghu"></label>
									<text>100</text>
								</view>
								<view class="search-result-group-feature-single">
									<text>文件多</text>
								</view>
								<view class="search-result-group-feature-single">
									<text>妹子多</text>
								</view>
								<view class="search-result-group-feature-single">
									<text>活跃度高</text>
								</view>
							</view>
							<view class="search-result-group-sign ">
								做个俗人，贪财好色，一身正气，不谈亏钱，不负遇见做个俗人，贪财好色，一身正气，不谈亏钱，不负遇见
							</view>
						</view>
						<view class="search-result-group-add">
							添加
						</view>
					</view>
				 </view>
				 
			 </scroll-view>
			 
		</scroll-view>
	</view>
</template>

<script>
	
	import addFriendNavigation from '@/components/my-components/navigation/add-friend-navigation.nvue'
	import utils from "@/common/util.js"
	import user from "@/api/user.js"
	var _self
	
	export default {
		data() {
			return {
				height:0,//获取的状态栏高度
				key: '', // 搜索关键字
				select: 0, // 选项卡
				isFocus: true, // 输入框获取焦点标识
				searchResult: [] ,// 搜索结果
				pageClass: 'page' ,// 页面背景class
			}
		},
		onLoad() {
			_self = this
			// 获取当前用户信息
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo == null) {
				uni.navigateTo({
					url:'../../login/addAndRegister/addAndRegister',
					animationType: 'pop-in',
					animationDuration: 200
				})
			} else {
				this.user = userInfo
			}
			
			this.height = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			async search(){
				uni.showLoading({
					title:"搜索中。。。。"
				})
				_self.searchResult = await user.search(_self.key)
				if(_self.searchResult.length == 0){
					_self.pageClass = 'errorPage'
				}else{
					_self.pageClass = 'page'
				}
				uni.hideLoading()
			},
			addFriend(result){
				
				// 修改为添加中
				result.added = 1
				this.searchResult.splice(this.searchResult.indexOf(result),1,result)
				
				// 页面跳转
				uni.navigateTo({
					url:'../addFriend/addFriend?result='+JSON.stringify(result),
					animationType:"slide-in-bottom",
					animationDuration:400
				})
				
			},
			toZero(){
				this.select = 0
				this.key = ""
				this.searchResult = []
			},
			// 输入框失去焦点触发
			noFocus(){
				this.isFocus = false
			},
			focus(){
				this.isFocus = true
				this.pageClass = 'page' 
			},
			onClick(event){
				console.log(event)
			},
			findMan(){
				this.select = 0
				console.log('findMan')
			},
			findGroup(){
				this.select = 1
				console.log('findGroup')
			}
		},
		components:{
			addFriendNavigation
		}
	}
</script>

<style>
	@import url("searchFriend.css");
</style>
